<template>
  <div class="article-page">
    <!-- 头部 -->
  <div class="banner">
    <div class="container">
      <h1>{{singleArticle.title}}</h1>
      <ArticleMeta :article="singleArticle" @favoritePost="favoritePost" @unFavoritePost="unFavoritePost"/>
    </div>
  </div>
  <!-- 主体内容 -->
  <ArticleContent :singleArticle="singleArticle"/>
</div>
</template>

<script>
import ArticleMeta from './child/ArticleMeta'
import ArticleContent from './child/ArticleContent'
import {reqGetArticle, reqFollowArticle, reqUnFollowArticle} from '../../api/article'
import marked from 'marked'
export default {
  name:'ArticlePage',
  data () {
    return {
       singleArticle: {}
    }
  },
  methods: {
    // 获取文章列表数据
    async getSingleArticle(){
      const result = await reqGetArticle(this.$route.params.aid)
      result.article.body = marked(result.article.body)
      this.singleArticle = result.article
    },

    // 将markdown转换为HTML
    changeData(data){
      let result = data.map(item => {
        item.body = marked(item.body)
        return item
      })
      return result
    },

    // 收藏文章
    async favoritePost(){
      const result = await reqFollowArticle(this.$route.params.aid)
      this.singleArticle = result.article
    },

    // 取消收藏文章
    async unFavoritePost(){
      const result = await reqUnFollowArticle(this.$route.params.aid)
      this.singleArticle = result.article
    }
  },
  created() {
    this.getSingleArticle()
  },
  components:{
    ArticleMeta,
    ArticleContent
  }
}

</script>
<style lang='less' scoped>
</style>